<template>
	<div class="rankBoxAll">
		<div class="left" :style="{'color':rank<=3?'red':'black'}">{{rank}}</div>
		<div class="center">
			<div class="title">{{info.title}}</div>
			<div class="context">{{info.context}}</div>
			<div class="info">
				<div class="writer">
					<div class="writerPic">
						<img :src="info.userPic" />
					</div>
					<div class="infoContext">{{info.name}}</div>
				</div>
				<div class="like">
					<img src="../../static/dislike.png" />
					<div class="infoContext">{{info.like}}点赞</div>
				</div>
				<div class="comment">
					<img src="../../static/comment.png" />
					<div class="infoContext">{{info.comment}}条评论</div>
				</div>
			</div>
		</div>
		<div class="pic">
			<img :src="info.pic" />
		</div>
	</div>
</template>

<script>
	export default{
		props:['info','rank']
	}
</script>

<style>
	.rankBoxAll .center .info,
	.rankBoxAll .center .info .writer,
	.rankBoxAll .center .info .like,
	.rankBoxAll .center .info .comment {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.rankBoxAll {
		display: flex;
		flex-direction: row;
		width: calc(100% - 32px);
		height: 140px;
		padding: 16px;
		border-bottom: 1px solid #EEEEEE;
	}

	.rankBoxAll .left {
		flex: 1;
	}

	.rankBoxAll .center {
		display: flex;
		flex-direction: column;
		height: 100%;
		flex: 10;
		justify-content: space-between;
	}

	.rankBoxAll .pic {
		display: flex;
		justify-content: flex-end;
		align-items: top;
		flex: 6;
	}

	.rankBoxAll .pic img {
		height: 105px;
		width: 190px;
		object-fit: cover;
		border-radius: 8px;
	}

	.rankBoxAll .left,
	.rankBoxAll .center .title {
		height: 18px;
		line-height: 18px;
		font-size: 18px;
		font-weight: bold;
	}

	.rankBoxAll .center .context {
		height: 90px;
		overflow: hidden;
		font-size: 8px;
		line-height: 24px;
		padding-top: 6px;
		color: #999999;
	}

	.rankBoxAll .center .info .writer .writerPic,
	.rankBoxAll .center .info .writer .writerPic img {
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}

	.rankBoxAll .center .info .like img {
		width: 20px;
		height: 20px;
	}

	.rankBoxAll .center .info .comment img {
		width: 24px;
		height: 20px;
	}

	.rankBoxAll .center .info .infoContext {
		font-size: 8px;
		color: #999999;
		margin: 0 24px 0 8px;
	}
</style>
